import QtQuick 1.0
import "../../../common/lib/kdeadmouseutils-build-desktop"

FocusScope {
     width: 1200
     height: 700
     id : detailM
     focus:true
     Rectangle{
      anchors.fill: parent
      color : '#3E606F'
     }
     
     property variant infos;
     signal showVideo(string videourl)
     signal showTrailer(string trailerCode)
     signal returnToList()
     Keys.onLeftPressed : detailM.returnToList();
     Keys.onRightPressed : detailM.returnToList();
    
     onInfosChanged :{
	txtModel.clear();
	txtModel.append({'act':'vid' , 't' : infos.actors, 'h':60 });
	txtModel.append({'t' : infos.synopsisShort, 'h':500 });
	txtModel.append({'act':'bd' , 't' : 'Bande annonce', 'h':50 });
	txtModel.append({'act':'fi' , 't' : 'Film', 'h':50 });
     }
     
     QmlSetting{
	id:setting
	appName:'allocine'
	property string prefixUrl
	Component.onCompleted: {
	   prefixUrl=value('magikPrefix');
	}
     }
     ListModel {
	  id : magikModelId
	  ListElement {
	      title : 'ceci est un Titre'
	      productionYear : '2010'
	      trailerCode : 'code'
	      url : 'nimp'
	      poster : 'http://images.allocine.fr/medias/nmedia/18/73/62/60/19704945.jpg'
	      actors :'Robert De Niro, Edward Norton, Milla Jovovich, Frances Conroy, Enver Gjokaj'
	      synopsisShort : "Alors qu’il compte impatiemment les jours qui le séparent de la retraite, Jack Mabry se retrouve chargé du dossier de Gerald \"Stone\" Creeson, afin de décider si celui-ci peut bénéficier d’une libération conditionnelle. Incarcéré pour avoir maquillé le meurtre de ses grands-parents en déclenchant un incendie, Stone doit convaincre Mabry qu’il s’est réhabilité. Mais sentant qu’il n’a aucune chance de persuader Jack lui-même, Stone va demander à sa femme, Lucetta, de séduire l'agent. Les efforts de celle-ci pour influencer le verdict vont avoir des conséquences aussi profondes qu’inattendues sur les deux hommes. En jouant sur le parallèle troublant entre leurs parcours et leurs tentatives d’échapper aux plus sombres pulsions, le détenu estompe peu à peu la frontière qui sépare l’homme du côté de la loi de celui qui ne l’est pas…"
	  }
     }
     
     Component.onCompleted: {
	   infos=magikModelId.get(0);
     }

	
     ListModel {
	  id : txtModel
    }
     Item   {
     id:imgVid
     width : 300
     height : parent.height
     Image {
	    id:imPoster
	    width : parent.width
	    anchors.verticalCenter: parent.verticalCenter
	    anchors.left:parent.left
	    fillMode: Image.PreserveAspectFit
	    source: infos.poster
	    smooth: true
      }
      Rectangle {
	  anchors.left : parent.left
	  anchors.top:imPoster.bottom
	  anchors.topMargin: 20
	  anchors.leftMargin: 10
	  border.color : 'black'
	  border.width : 2
	  color : 'transparent'
	  height : 120//parent.height - imPoster.height
	  width : parent.width
	  Text {
	      width : parent.width
	      wrapMode:Text.WordWrap
	      //anchors.fill: parent
	      anchors.centerIn: parent
	      text: infos.title + '-('+infos.productionYear+')'
	      color: "#193441"
	      font.pixelSize: 20
	    }
      }
     }
       Rectangle {
	id:textInfos
	color : 'transparent'
	width : 600
	height : parent.height
	anchors.left : imgVid.right
	anchors.verticalCenter: imgVid.verticalCenter
	ListView {
	  width : parent.width
	  anchors.leftMargin:100
	  height : parent.height - 50
	  anchors.centerIn: parent
	  orientation : ListView.Vertical
	  spacing : 100
	  focus:true
	  model: txtModel
	  delegate : Rectangle {
			  id:rectItem
			  smooth : true
			  anchors.left : parent.left
			  anchors.leftMargin:activeFocus?100:50
			  scale : activeFocus?1.2:1
			  //anchors.horizontalCenter: imgVid.horizontalCenter
			  border.color : 'black'
			  border.width : 2
			  color : 'transparent'
			  //opacity : 0,8
			  height : h
			  width : parent.width
			  Text {
			    width : parent.width
			    wrapMode:Text.WordWrap
			    anchors.centerIn: parent
			    //horizontalAlignment:Text.AlignLeft
			    text: t
			    color: "#193441"
			    font.pixelSize: 20
			  }
			  
			  Keys.onReturnPressed : {
			    console.log('act' + act );
			    if('bd' == act){
			      detailM.showTrailer(infos.trailerCode);
			    }else if('fi' == act){
			      detailM.showVideo(setting.prefixUrl + infos.url);
			    }
			    event.accepted = true;
			  }
			  
 			  /*states: State {
				name: "active"; when: rectItem.activeFocus
				PropertyChanges { target: rectItem;scale: 1.3 }
			    }

			    transitions: Transition {
				NumberAnimation { properties: "scale"; duration: 100 }
			    }*/
			}
	  
	}
      
	
       }
     
     
 }